/*
 * @Author: FengKongLi 
 * @Date: 2021-08-30 22:45:35 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-08-30 23:32:05
 */
// 我的页面
<template>
  <div>
    <div class="head">
      <div class="photo">
        <van-image round width="95px" height="95px" :src="userForm.userFace">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </div>
      <div class="messageBack"></div>
      <div class="message">
        <h4>{{ userForm.username }}</h4>
        <div class="line">
          <ul>
            <li>已完成<span>123</span></li>
            <li>待服务<span>2</span></li>
            <li>已支付<span>110</span></li>
            <li>
              余额<span>{{ userForm.balance }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="nav">
      <ul>
        <li @click="toAuthentication">实名认证<span>></span></li>
        <li @click="toWithdrawal">提现<span>></span></li>
        <li @click="toMoney">收益信息<span>></span></li>
        <li @click="toInformation">个人信息<span>></span></li>
      </ul>
    </div>
    <!-- 弹框 -->
    <div>
      <van-dialog
        v-model="show"
        title="提现"
        show-cancel-button
        @cancel="toCancelWithdrawal"
        @confirm="toConfirmWithdrawal"
      >
        <van-form>
          <van-field
            v-model="withdrawalForm.money"
            name="money"
            label="金额"
            placeholder="金额"
          />
        </van-form>
      </van-dialog>
    </div>
    <div class="logout">
      <button @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script>
import { getToken, getUserId, removeToken } from "@/utils/auth";
import { info } from "@/api/user";
import { submitAccountApply } from "@/api/mine";
export default {
  name: "",
  data() {
    return {
      token: "",
      userForm: {},
      // 弹框显示
      show: false,
      // 提现表单
      withdrawalForm: {},
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    async getUser() {
      this.token = getToken();
      let res = await info({ token: this.token });
      // console.log(res.data);
      this.userForm = res.data;
      // console.log(this.userForm);
    },
    // 实名认证
    toAuthentication() {
      this.$router.push("/authentication");
    },
    // 提现
    toWithdrawal() {
      this.withdrawalForm = {};
      this.show = true;
    },
    // 提现确认按钮
    async toConfirmWithdrawal() {
      this.withdrawalForm.userId = getUserId();
      this.withdrawalForm.applyType = "提现";
      let res = await submitAccountApply(this.withdrawalForm);
      if (res.status == 200) {
        this.withdrawalForm = {};
        this.$toast.success("提交申请成功");
      }
    },
    // 提现取消按钮
    async toCancelWithdrawal() {
      this.withdrawalForm = {};
      this.show = false;
    },
    // 收益信息
    toMoney() {
      this.$router.push("money");
    },
    // 个人信息
    toInformation() {
      this.$router.push("/information");
    },
    // 退出登录
    logout() {
      removeToken();
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.headBack {
  position: absolute;
  width: 100%;
  height: 200px;
}
.head {
  position: relative;
  width: 100%;
  height: 200px;
  // background: linear-gradient(to right, #ccff99, #99cc33, #ccff99);
  background-color: transparent;
  .photo {
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -48px;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    z-index: 1;
  }
  .messageBack {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -45%;
    width: 90%;
    height: 180px;
    background-color: #b4dbff;
    animation: boWen 3s ease-in-out infinite;
    opacity: 0.6;
    box-shadow: 0px 0px 10px #666;
    border-radius: 8px;
    text-align: center;
  }
  .message {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -45%;
    width: 90%;
    height: 180px;
    text-align: center;
    h4 {
      margin: 60px 0 5px 0;
      font-size: 18px;
      font-weight: 400;
    }
    h5 {
      margin: 0;
      font-size: 13px;
      font-weight: 400;
      color: #003366;
    }
    .line {
      padding: 0 7%;
    }
    .line li {
      float: left;
      padding-top: 10px;
      width: 25%;
      height: 10vh;
      box-sizing: border-box;
      font-size: 12px;
      color: #adadad;
      span {
        display: block;
        margin-top: 5px;
        font-size: 24px;
        color: #6699ff;
      }
    }
  }
}
.nav {
  margin-top: 60px;
  padding: 30px;
  width: 100%;
  height: calc(100vh - 390px);
  box-sizing: border-box;
  li {
    display: block;
    margin: 10px 0;
    padding: 10px 0;
    width: 100%;
    font-size: 15px;
    color: #999999;
    border-bottom: 1px solid #f9f6f6;
    cursor: pointer;
    span {
      float: right;
      font-size: 20px;
    }
  }
}
.logout {
  height: 90px;
  text-align: center;
  button {
    width: 50%;
    height: 40px;
    color: #fff;
    background: #6025f5;
    background: linear-gradient(to right, #ff5555, #6025f5);
    border: 0;
    border-radius: 20px;
    cursor: pointer;
  }
}

@keyframes boWen {
  0%,
  100% {
    clip-path: polygon(
      50% 3%,
      67% 25%,
      84% 8%,
      100% 21%,
      100% 100%,
      53% 100%,
      0 100%,
      0 25%,
      14% 5%,
      35% 26%
    );
  }

  50% {
    clip-path: polygon(
      44% 21%,
      61% 6%,
      80% 25%,
      99% 0,
      100% 100%,
      53% 100%,
      0 100%,
      0 0,
      13% 21%,
      28% 6%
    );
  }
}
</style>